<template>
  <base-breadcrumb>
    <div v-loading="loading">
      <a-card :bordered="false">
        <title-name title="基础信息" />

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="分包商名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.subcontractors"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
                  :md="16"
                  :sm="16"
          >
            <a-form-item
                    label="所属单位"
                    :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                      :value="unit"
                      disabled
              />
            </a-form-item>
          </a-col>
<!--          <a-col-->
<!--            :md="8"-->
<!--            :sm="8"-->
<!--          >-->
<!--            <a-form-item-->
<!--              label="分公司"-->
<!--              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
<!--              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
<!--            >-->
<!--              <BaseInput-->
<!--                v-model="dels.branch"-->
<!--                disabled-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col-->
<!--            :md="8"-->
<!--            :sm="8"-->
<!--          >-->
<!--            <a-form-item-->
<!--              label="项目名称"-->
<!--              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
<!--              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
<!--            >-->
<!--              <BaseInput-->
<!--                v-model="dels.projectName"-->
<!--                disabled-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="项目编号"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.projectNum"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="分包商联系人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.contacts"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="联系人电话"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.contactPhone"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="资质类别等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.certificateLevel"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="统一社会信用代码"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.businessLicense"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="安全生产许可证"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.productionNum"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="考核时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <div style="display:flex;">
                <a-select
                  v-model="dels.assessmentTime"
                  style="width: 100%"
                  @change="getAssessmentTime"
                  @popupScroll="scrollMore"
                >
                  <a-select-option
                    v-for="item in assessmentTimes"
                    :key="item"
                    :value="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
                <a-button type="primary" @click="searchData">确定</a-button>
              </div>
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核总分"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentScore" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8" v-if="dels.fileInfoVO.length">
            <a-form-item
              label="佐证附件"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BUploadVModel v-model="dels.fileInfoVO" uploadType="single" businessCode="LCM08"
                             :need-chinese-name="true"
                             disabled=""
              />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentLevel" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="实际考核人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.checkUserName" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <div style="float: right;margin-top: 20px" class="page-btn-right-top">
        <a-button type="primary" @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  getMonthHeaders,
  getMonthContent,
  getQuarterDetails,
  getQuarterDetailsTotal,
  getQuarterly,
  getQuarterAssessmentDoc
} from '@/api/subcontractors/quarterAssessment'
import printButton from '@/components/BasePrintButton'
import ARow from 'ant-design-vue/es/grid/Row'
import BUploadVModel from '@/components/BComponents/BUploadVModel'

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    printButton,
    Ellipsis,
    BUploadVModel
  },
  data() {
    return {
      loading: false,
      htmlData: '',
      dels: { fileInfoVO: [] },
      assessmentId: '',
      assessmentTimes: [],
      subcontractorId: '', // 分包商id
      unit: '',
      pageNo: 1,   // 调入人员分页
      pageSize: 20,    // 调入人员分页数量
      totalPages: 0    // 总页数
    }
  },

  created() {
    this.assessmentId = this.$route.query.assessmentId
    this.getData()
  },
  methods: {    // 查询季度考核内容
    async getMonthContent(data = { id: this.assessmentId }) {
      this.data = []
      let res = await getMonthContent(data)
      if (res.code === 200) {
        this.dels.assessmentScore = res.data.assessmentScore
        this.dels.assessmentLevel = res.data.assessmentLevel
        this.dels.checkUserName = res.data.checkUserName
        if (!res.data.fileInfoVO) {
          this.dels.fileInfoVO = []
        }
      }
    },
    // 查询季度考核详情
    async getData() {
      this.loading = true
      let res = await getQuarterDetails(this.assessmentId)
      if (res.code === 200) {
        this.dels = { ...this.dels, ...res.data }
        this.unit = this.dels.branch + '/' + this.dels.projectName
        await this.getQuarterlyReq()
      }
      await this.getMonthContent()
      this.loading = false
    },
    // 下拉滚动加载
    scrollMore(e) {
      const { target } = e
      let total = target.scrollTop + target.offsetHeight
      let scrollHeight = target.scrollHeight
      // this.pageNo是当前页 this.totalPage是总页数
      if (total >= scrollHeight - 3 && total < scrollHeight + 3 && this.pageNo <= this.totalPages) {
        this.pageNo = this.pageNo + 1
        this.getQuarterlyReq() // 调用api方法
      }
    },
    // 查询季度时间
    async getQuarterlyReq() {
      let res = await getQuarterly({
        subContractorId: this.dels.subContractorId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (res.code === 200) {
        this.assessmentTimes = res.data
        this.totalPages = res.totalPages
      }
    },
    // 考核时间搜索
    async searchData() {
      let data = { subcontractorId: this.dels.subContractorId, assessmentTime: this.dels.assessmentTime }
      this.loading = true
      await this.getMonthContent(data)
      this.loading = false
    },
    // 查询季度考核时间
    getAssessmentTime(val) {
      this.dels.assessmentTime = val
    }
  }
}
</script>
<style scoped>
.notScore {
  width: 65px;
  display: flex
}
</style>

